---
const features = [
  {
    icon: 'assets/features/icon-01.svg',
    title: '全网最高的佣金',
    ref: 'javascript:void(0)',
    // refTitle: '立即申请',
    description:
      '全网最高佣金，注册即享一级代理分佣，赢在起跑线',
  },
  {
    icon: 'assets/features/icon-02.svg',
    title: '佣金保障',
    ref: 'javascript:void(0)',
    // refTitle: '立即申请',
    description:
      '平台所有代理佣金由平台统一结算，申请提现后由平台统一打款，避免上游代理跑路问题',
  },
  {
    icon: 'assets/features/icon-03.svg',
    title: '零库存压力',
    ref: 'javascript:void(0)',
    // refTitle: '立即申请',
    description:
      '所有流量卡品平台一键分销，没有压货库存烦恼，创业路上轻装上阵.',
  },
  {
    icon: 'assets/features/icon-04.svg',
    title: '金牌代理',
    ref: 'javascript:void(0)',
    // refTitle: '立即申请',
    description:
      '日均推广号卡5万单！运营商金牌合作伙伴！安全稳定！.',
  },
];
---

<!-- ====== Features Section Start -->
<section class="pt-20 pb-8 lg:pt-[120px] lg:pb-[70px] dark:bg-dark">
  <div class="container">
    <div class="-mx-4 flex flex-wrap">
      <div class="w-full px-4">
        <div class="mb-12 mx-auto max-w-[485px] lg:mb-[70px] text-center">
          <span class="mb-2 block text-lg font-semibold text-primary">
            Features
          </span>
          <h2 class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]">
            172号卡分销系统官网
          </h2>
          <p class="text-base text-body-color dark:text-dark-6">
            运营商官方合作伙伴，大流量+超低月租
          </p>
        </div>
      </div>
    </div>
    <div class="-mx-4 flex flex-wrap">
      {
        features.map((feature) => (
          <div class="w-full px-4 md:w-1/2 lg:w-1/4">
            <div class="wow fadeInUp group mb-12" data-wow-delay=".1s">
              <div
                class="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
              >
                <span
                  class="absolute top-0 left-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
                ></span>
                <img src={feature.icon} alt="icon" />
              </div>
              <h4 class="mb-3 text-xl font-bold text-dark dark:text-white">
                {feature.title}
              </h4>
              <p class="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
                {feature.description}
              </p>
              <a
                href={feature.ref}
                class="text-base font-medium text-dark dark:text-white hover:text-primary dark:hover:text-primary"
              >
                {feature.refTitle}
              </a>
            </div>
          </div>
        ))
      }
    </div>
  </div>
</section>
<!-- ====== Features Section End -->